<!--
 * @Author: your name
 * @Date: 2021-02-21 15:32:27
 * @LastEditTime: 2021-02-21 15:55:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\polarized-glasses\index.vue
-->
<template>
  <div class="w1200auto">
    <bread-crumb class="mb10" :breadcrumbTtem="breadcrumbTtem" />
	<div class="banner text_c relative mb80">
		<img src="@/assets/image/polarized_glasses/polarized_sunglasses_7.png" alt="" class="bannerloading" id="bannerImg">
		<article class="absolute banner_polarizedGlasses text_l none article">
			<h1 class="size30 lh14 b mb20 cfff">{{$t('Polarized sunglasses')}}</h1>
			<p class="size16 cfff b mb10 lh14">{{$t('Reduce the polarization and glare.')}}</p>
			<p class="size16 cfff b mb10 lh14">{{$t('of the lens to provide better visual acuity.')}}</p>
		</article>
		<h3 class="absolute size26 cfff banner_polarized_non">{{$t('Non Polarized')}}</h3>
		<h3 class="absolute size26 cfff banner_polarized_pol">{{$t('Polarized')}}</h3>
	</div>
	<div class="flex polarized_feature mb100">
		<div class="polarized_feature_left">
			<h3 class="size30 mb20 b">{{$t("Features of Polarized Sunglasses")}}</h3>
			<p class="size14 b ptb5">{{$t("Polarization occurs when light is reflected from a horizontal surface, such as a road, water or snow. ")}}</p>
			<p class="size14 b ptb5">{{$t("However, wearing a vertically oriented filter can help us to prevent this light from affecting our vision. ")}}</p>
			<p class="size14 b ptb5">{{$t("Polarized lenses have a special coating that allows them to block horizontal polarized light.")}}</p>
			<p class="size14 b ptb5">{{$t("In other words, only vertical light is allowed to pass through these filters. ")}}</p>
			<p class="size14 b ptb5">{{$t("They block annoying glare while allowing non-polarized light to pass through.")}}</p>
			<p class="size14 b ptb5">{{$t("Compared to standard tinted sunglasses, this provides better visual acuity. ")}}</p>
		</div>
		<div class="flex polarized_feature_right">
			<div class="polarized_feature_icon">
				<div class="relative pb10 text_c mb10">
					<img class="iconImg" src="@/assets/image/polarized_glasses/polarized_sunglasses_8.png" alt="">
					<img class="absolute iconRight" src="@/assets/image/polarized_glasses/polarized_sunglasses_11.png" alt="">
				</div>
				<p class="text_c size12 b white-no">{{$t('Eliminate lens flare reflection')}}</p>	
			</div>
			<div class="polarized_feature_icon">
				<div class="relative pb10 text_c mb10">
					<img class="iconImg" src="@/assets/image/polarized_glasses/polarized_sunglasses_9.png" alt="">
					<img class="absolute iconRight" src="@/assets/image/polarized_glasses/polarized_sunglasses_11.png" alt="">
				</div>		
				<p class="text_c size12 b white-no">{{$t('True color perception')}}</p>
			</div>
			<div class="polarized_feature_icon">
				<div class="relative pb10 text_c mb10">
					<img class="iconImg" src="@/assets/image/polarized_glasses/polarized_sunglasses_10.png" alt="">
					<img class="absolute iconRight" src="@/assets/image/polarized_glasses/polarized_sunglasses_11.png" alt="">
				</div>
				<p class="text_c size12 b white-no">{{$t('Reduce visual fatigue')}}</p>
			</div>
		</div>
	</div>
	<div class="polarized_scenes">
		<h3 class="size30 b mb20">{{$t("Which scenes need polarized sunglasses？")}}</h3>
		<p class="size14 b ptb5">{{$t("Polarized sunglasses are a necessity for outdoor activities.")}}</p>
		<p class="size14 b ptb5">{{$t("They are suitable for outdoor mountaineering, skiing, cycling, fishing, boating and other sports, helping to reduce glare, protect eyes and increase the fun of activities.")}}</p>
		<ul class="flex polarized_scenes_img ptb50">
			<li class="plr10 ptb10 s16">
				<img class="mb30 img" src="@/assets/image/polarized_glasses/polarized_sunglasses_1.png" alt="">
				<h3 class="size18 b text_c">{{$t("Cycling")}}</h3>
			</li>
			<li class="plr10 ptb10 s16">
				<img class="mb30 img" src="@/assets/image/polarized_glasses/polarized_sunglasses_2.png" alt="">
				<h3 class="size18 b text_c">{{$t("Skiing")}}</h3>
			</li>
			<li class="plr10 ptb10 s16">
				<img class="mb30 img" src="@/assets/image/polarized_glasses/polarized_sunglasses_3.png" alt="">
				<h3 class="size18 b text_c">{{$t("Rowing")}}</h3>
			</li>
			<li class="plr10 ptb10 s16">
				<img class="mb30 img" src="@/assets/image/polarized_glasses/polarized_sunglasses_4.png" alt="">
				<h3 class="size18 b text_c">{{$t("fishing")}}</h3>
			</li>
			<li class="plr10 ptb10 s16">
				<img class="mb30 img" src="@/assets/image/polarized_glasses/polarized_sunglasses_5.png" alt="">
				<h3 class="size18 b text_c">{{$t("drive")}}</h3>
			</li>
			<li class="plr10 ptb10 s16">
				<img class="mb30 img" src="@/assets/image/polarized_glasses/polarized_sunglasses_6.png" alt="">
				<h3 class="size18 b text_c">{{$t("Mountaineering")}}</h3>
			</li>
		</ul>
	</div>
  </div>
</template>

<script>
import BreadCrumb from "~/components/common/Breadcrumb";
export default {
    async asyncData({ req, params, query, route, store }) {
        // 获取路由层级
        let arr = ['polarized-glasses']
        return {
            breadcrumbTtem: arr || []
        }
    },
    components: {
        BreadCrumb
    }
}
</script>

<style lang="scss" scoped>
	.banner_polarizedGlasses {
		left: 30px;
		top: 150px;
	}
	.banner_polarized_non {
		right: 550px;
		bottom: 40px;
	}
	.banner_polarized_pol {
		right: 120px;
		bottom: 40px;
	}
	.polarized_feature {
		justify-content: space-between;
    	align-items: flex-end;
	}
	.polarized_feature_right {
		width: 40%;
    	justify-content: space-between;
	}
	.iconImg {
		width: 60px;
	}
	.iconRight {
		position: absolute;
		right: 35px;
		bottom: -5px;
	}
	.polarized_scenes_img {
		justify-content: space-around;
	}
	.s16{width: 16.67%;}
	.polarized_feature_icon{width:33%;}
</style>